<template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0">站位的格子</el-col>
      <el-col :span="12" :xs="24">
        <el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForms">
          <h1>登陆窗口标题</h1>
          <h2>我要搞定前端</h2>
          <el-form-item prop="userName">
            <el-input :prefix-icon="User" v-model="loginForm.userName"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input :prefix-icon="Lock" type="password" v-model="loginForm.password" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" class="login_btn" type="primary" size="default" @click="login">登陆</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { User, Lock } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import useUserStore from "@/store/modules/user";
import { useRouter,useRoute } from "vue-router";
import { ElNotification } from "element-plus";
import { getTimeDiscription } from "@/utils/time";
let loading = ref(false)

let useStore = useUserStore();
let $router = useRouter();
let $route = useRoute();

let loginForm = reactive({ userName: 'admin', password: '123456' })

// 这是表单实例
let loginForms = ref();

const rules = {
  userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' },
  { min: 5, message: 'Length should be 3 to 5', trigger: 'change' },],
  password: []
}
const login = async () => {
  
  await loginForms.value.validate();
  loading.value = true
  try {
    // 可以书写.then
    await useStore.userLogin(loginForm)
    let redirect:any = $route.query.redirect;
    $router.push({path:redirect||'/'});

    ElNotification({
      type: 'success',
      message: 'WELCOM BACCK',
      title: `hi,${getTimeDiscription()}`
    })
  } catch (error) {
    ElNotification({
      type: 'error',
      message: (error as Error).message
    })
  }
  loading.value = false
}
</script>

<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100vh;
  background: url("@/assets/images/background.jpg") no-repeat;
  background-size: cover;

  .login_form {
    position: relative;
    width: 80%;
    top: 30vh;
    background: url("@/assets/images/login_form.png") no-repeat;
    background-size: cover;
    padding: 40px;

    h1 {
      color: white;
      font-size: 40px;
    }

    h2 {
      color: white;
      font-size: 20px;
      margin: 20px 0;
    }

    .login_btn {
      width: 100%;
    }

  }
}
</style>
